<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            height: 30px;
            background-color: red;
            margin-top: 2px;
            display: none;
        }
    </style>
</head>
<body>
<input type="button" value="显示" id="btn">
<div id="first">first</div>
<div id="second">second</div>
<div></div>
<script src="../jquery-3.3.1.js"></script>
<script>
    //国内一般使用1.12版本的jq，方便兼容低版本的浏览器
    var num = 4793;
    $(document).ready(function () {
        var num = 4399;
        console.log(num);
        var flag = false;
        $("#btn").click(function () {
            if(flag){
                $("div").hide(1000);
                flag = false;
            }else {
                $("div").show(1000);
                flag = true;
            }
        });

        var first = document.getElementById("first");
        //将dom对象转化为jq对象，并使用jq的方法
        $(first).css("color","blue");
        //将jq对象转化为dom对象，并使用dom的方法
        var $second = $("#second");
        $second[0].style.color = "yellow";

        //mouseover:鼠标经过子元素也会触发该事件
        //mouseenter:鼠标经过子元素不会触发对应的事件

    });
    console.log(num);
</script>
</body>
</html>